<template>
  <el-select v-model="value" filterable placeholder="请选择" @change="onValueChange">
    <el-option v-for="(item,i) in options" :key="item.id" :label="item.name" :value="i"></el-option>
  </el-select>
</template>

<script>
import { findIndexByKeyValue } from "@/api/common"; //按指定关键字找元素，返回第一个匹配成功的下标
import {
  getProductKindSelectList //url: '/Product/GetProductKindSelectList'
} from "@/api/merchant";
export default {
  props: {
    id: { type: Number, default: 0 }
  },
  data() {
    return {
      options: [],
      value: ""
    };
  },
  created() {
    getProductKindSelectList().then(r=>{
      if(r.code==0){
        this.options=r.data;
        this.SetInit();
      }
    });    
  },
  watch: {
    id: function() {
      this.SetInit();
    }
  },
  methods: {
    SetInit(id) {
      if (id == 0) {
        this.value = "";
      } else {
        let i = findIndexByKeyValue(this.options, "id", id);
        if (i >= 0) {
          this.value = this.options[i].name;
        }
      }
    },
    onValueChange(index) {
      this.$emit("change", this.options[index]);
    }
  }
};
</script>